{% extends "base.html" %}

{% block content %}

<title>DIRECTIONS! FOLLOW THEM! DON'T GET LOST!</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  
<script>

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var MY_MAPTYPE_ID = 'nightOut';
var lat = {{ lat }};
var lon = {{ lon }} ;
var dest = " {{ address }} ";

function initialize() {
  var person = new google.maps.LatLng(lat, lon);
   
    var myOptions = {
      zoom: 13,
      center: person,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
  map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

  directionsDisplay = new google.maps.DirectionsRenderer();
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));

  var request = {
    origin:person, 
    destination:dest,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}

</script> 
<body onload="initialize()">
  <h1> You are going to {{ restaurant }}! </h1>
  <div id="map_canvas" style="width: 640px; height: 480px;"></div>
  <div id="directionsPanel" style="float:right;width:100%;height 100%"></div>
</body>

{% endblock %}
